<template>
	<view class="screening">
		<view  v-if="selectDate" class="screening_time">
			<view @click="showDateSelect = true">{{timeText}}</view>
			<u-calendar closeOnClickOverlay :show="showDateSelect" @confirm="dataSelect" @close="closeDateSelect"
				color="#ff6a36" mode="range" rowHeight="100" :minDate="minDate" :maxDate="nowTime"></u-calendar>
		</view>
		<view  v-if="selectType" class="screening_type">
			<view @click="showTypeSelect = true">筛选</view>
			<u-popup mode="top" :show="showTypeSelect" @close="closeTypeSelect">
				<view class="siftOuter">
					<div v-for="item in selectList" class="siftButton"
						:class="{siftButtonColorHover:item.isSelect,siftButtonColor:!item.isSelect}"
						@click="hoverButton(item.uuid)">{{item.label}}</div>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getFormatTime,
		getTimeByDay
	} from "utils/time.js"
	export default {
		name: "Screening",
		props: {
			selectDate: {
				type: Boolean,
				default: true
			},
			selectType: {
				type: Boolean,
				default: true
			},
			selectTypeList: {
				type: Array
			}
		},
		data() {
			const nowTime = getFormatTime({
				format: "yyyy-mm-dd"
			})
			const minTime = getTimeByDay(-7, "yyyy-mm-dd")
			const selectList = this.selectTypeList.map(item => ({
				...item,
				isSelect: false
			}))
			return {
				nowTime,
				minDate: minTime,
				showDateSelect: false,
				showTypeSelect: false,
				timeList: [],
				selectList
			}
		},
		computed: {
			timeText() {
				return this.timeList.length ? `${this.timeList[0]} - ${this.timeList[this.timeList.length - 1]}` : "过去一周"
			}
		},
		methods: {
			hoverButton(uuid) {
				this.selectList.forEach(item => {
					if (item.uuid === uuid) {
						item.isSelect = !item.isSelect
					}
				})
			},
			closeDateSelect() {
				this.showDateSelect = false
			},
			closeTypeSelect() {
				this.showTypeSelect = false
			},
			dataSelect(timeList) {
				this.closeDateSelect()
				this.timeList = timeList
				this.$emit("select", timeList)
			},
		}
	}
</script>

<style scoped>
	.screening {
		display: flex;
		justify-content: space-between;
		padding: 8rpx 4rpx;
		position: sticky;
		top: 0;
		z-index: 999;
		background-color: #f5f5f5;
		color: #5a5a5a;
	}

	.screening_time {}

	.screening_type {
		text-align: right;
	}

	.screening_time,
	.screening_type {
		flex-shrink: 0;
		padding: 8rpx 32rpx;
		border-radius: 8rpx;
		background-color: #fefefe;
		transform: .2s;
	}

	.screening_time:active,
	.screening_type:active {
		background-color: #f7f7f7;
	}

	.siftOuter {
		width: 100vw;
		display: flex;
		flex-flow: column;
	}

	.siftZoneBlock {
		width: 100vw;
		display: flex;
		flex-flow: column;
	}

	.zoneBlock {
		text-align: left;
		font-size: 15px;
		font-weight: 600;
		text-indent: 10px;
		margin: 3vh 0 1vh 0;
	}

	.siftButtons {
		display: flex;
		flex-wrap: wrap;
	}

	.siftButton {
		margin: 1vh 1vw;
		padding: 0;
		width: 30vw;
		height: 4vh;
		line-height: 4vh;
	}

	.siftButtonColor {
		background-color: #d1d1d1;
	}

	.siftButtonColorHover {
		color: #f0e656;
		background-color: #f0f0d2;
	}
</style>
